<template>
  <h1>当前求和为：{{sum}}</h1>
  <button @click="sum++">点我+1</button>
  <br />
  <br />
  <h1>当前信息为：{{msg}}</h1>
  <button @click="msg += '!'">点我+!</button>
  <br />
  <br />
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪水：{{person.job.j1.salary}}</h2>
  <button type="button" @click="person.name += '-'">修改名字</button>
  <button type="button" @click="person.age++">修改年龄</button>
  <button type="button" @click="person.job.j1.salary++">修改年龄</button>
</template>

<script>
// import Vue from 'vue'
import { ref, reactive, watch } from 'vue'

export default {
  name: 'Demo',
  setup() {
    let sum = ref(10)
    let msg = ref("你好")
    let person = ref({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    console.log(sum)
    console.log(msg)
    console.log(person)

    watch(sum, (newVal, oldVal) => {
      console.log("sum值变了", newVal, oldVal)
    })

    // ref生成的数据需要.value, 这样转化为reactive数据
    /* watch(person.value, (newVal, oldVal) => {
      console.log("person值变了", newVal, oldVal)
    }) */

    // 虽然是ref生成的RefImpl对象，只要开启deep: true也能监听到变化
    watch(person, (newVal, oldVal) => {
      console.log("person值变了", newVal, oldVal)
    }, {deep: true})

    // 返回一个对象，暴露给模板使用（常用）
    return {
      sum,
      msg,
      person
    }
  }
}
</script>

<style>

</style>
